import React, { useState, useEffect, useRef } from "react";
import { useThree } from "@react-three/fiber";
import { useGLTF, RoundedBox } from "@react-three/drei";
import { message } from "antd";
import BoxA from "./BoxA";
import { zhongdata } from "./config";

export default function Zhong(props) {
  const { nodes, materials } = useGLTF(
    "https://ng-website.oss-cn-hangzhou.aliyuncs.com/glb/zhong.glb"
  );
  const [hover, sethover] = useState([]);
  const [higher, sethigher] = useState({
    first: 0,
    second: 0,
    third: 0,
    fourth: 0,
    fifth: 0,
  });

  let { activeFloor } = props;
  const { camera } = useThree();

  useEffect(() => {
    if (activeFloor === "2单元1") {
      sethigher({
        first: 0,
        second: 300,
        third: 300,
        fourth: 300,
        fifth: 300,
        sixth: 300,
      });
      sethover(["fifth", "second", "fourth", "third", "sixth"]);
      camera.position.set(
        98.20238285698228,
        135.28666319885468,
        10.666179464788518
      );
      camera.rotation.set(
        -1.8341449356580497,
        0.5472475123011193,
        2.0488534973214483
      );
      camera.updateMatrixWorld();
    } else if (activeFloor === "2单元2") {
      sethigher({
        first: 0,
        second: 0,
        third: 300,
        fourth: 300,
        fifth: 300,
        sixth: 300,
      });
      sethover(["first", "third", "fourth", "fifth", "sixth"]);
      camera.position.set(
        -0.0001469465043391801,
        147.32743597866155,
        -0.000010678383533412632
      );
      camera.rotation.set(
        -1.5707963992755143,
        -9.974143876935726,
        -1.6433373268160811
      );
    } else  {
      sethigher({
        first: 0,
        second: 0,
        third: 0,
        fourth: 0,
        fifth: 0,
        sixth: 0,
      });
      sethover([]);

      //sethover(["first", "second", "fourth", "third", "fifth", "sixth"]);
      camera.position.set(
        -0.0001469465043391801,
        176.32743597866155,
        -0.000010678383533412632
      );
      camera.rotation.set(
        -1.5707963992755143,
        -9.974143876935726e-7,
        -1.6433373268160811
      );
    }
  }, [activeFloor]);

  return (
    <group {...props} dispose={null}>
      <group
        position={[-604.79, 20.142 + higher.second, -1.997]}
        rotation={[Math.PI / 2, 0, -Math.PI / 2]}
      >
        {zhongdata?.second?.map((it, i) => {
          return (
            <BoxA
              {...it}
              index={i}
              key={i}
              setIndex={props?.setIndex}
              theindex={props?.theindex}
            ></BoxA>
          );
        })}

        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong2_1.geometry}
          material={materials.a50}
        >
          {hover.includes("second") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong2_2.geometry}
          material={materials.a42}
        >
          {hover.includes("second") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong2_3.geometry}
          material={materials.a29}
        >
          {hover.includes("second") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong2_4.geometry}
          material={materials.a55}
        >
          {hover.includes("second") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong2_5.geometry}
          material={materials.a56}
        >
          {hover.includes("second") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
      </group>
      <group
        position={[63.126, 15.557 + higher.third, -70.959]}
        rotation={[Math.PI / 2, 0, -Math.PI / 2]}
      >
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhongding_1.geometry}
          material={materials.a42}
        >
          {hover.includes("third") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhongding_2.geometry}
          material={materials.a50}
        >
          {hover.includes("third") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
      </group>
      <group
        position={[-604.79, 20.142 + higher.first, -1.997]}
        rotation={[Math.PI / 2, 0, -Math.PI / 2]}
      >
        {zhongdata?.first?.map((it, i) => {
          return (
            <BoxA
              {...it}
              index={i}
              key={i}
              setIndex={props?.setIndex}
              theindex={props?.theindex}
            ></BoxA>
          );
        })}
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_1.geometry}
          material={materials.a50}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_2.geometry}
          material={materials.a56}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_3.geometry}
          material={materials.a30}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_4.geometry}
          material={materials.a29}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_5.geometry}
          material={materials.a55}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_6.geometry}
          material={materials.a97}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
        <mesh
          castShadow
          receiveShadow
          geometry={nodes.zhong1_7.geometry}
          material={materials.a53}
        >
          {hover.includes("first") && (
            <meshPhysicalMaterial
              color={"lightblue"}
              transparent={true} //是否支持透明度
              opacity={0.2} //透明度
              //visible={true}//是否可见
              //metalness={1} //金属性贴图
              roughness={0} //粗糙程度 越精细镜面效果越强
              clearcoat={1} // 透明漆 罩光漆
              transmission={0} //透光效果 模型透明 表面效果处理不变 opactiy是整体透明 不削弱反射光
              // reflectivity={1} //光的 反射率
            />
          )}
        </mesh>
      </group>
    </group>
  );
}

useGLTF.preload(
  "https://ng-website.oss-cn-hangzhou.aliyuncs.com/glb/zhong.glb"
);
